﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab标签切换样式</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="./js/jquery-1.9.0.min.js" charset="utf-8"></script>
<style>
body {
	padding:0;
	margin:0;
	background:#fff;
	overflow-x: hidden; overflow-y: hidden;
}
body,html {
	height:100%
}
div,li,ul {
	padding:0;
	margin:0
}
img {
	vertical-align:top;
	border:0
}
li,ul {
	list-style:none;
	text-transform:capitalize
}
#banner {
	margin-bottom:-10px
}
#carousel {
	position:relative;
	z-index:2;
	margin-top:20px;
	transform-style:preserve-3d;
	perspective:800px
}
#carousel img {
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-252px;
	transition:transform .5s ease-in-out;
	box-shadow:8px 8px 20px rgba(0,0,0,.2);
	cursor:pointer
}
#bannerNav {
	position:relative;
	margin-top:20px;
	height:10px;
	padding:10px 0;
	text-align:center
}
#bannerNav ul li {
	cursor:pointer;
	overflow:hidden;
	display:inline-block;
	width:22px;
	margin:0 2px
}
#bannerNav ul li a {
	margin:0 auto;
	display:block;
	width:6px;
	height:6px;
	vertical-align:top;
	border-radius:3px;
	background:#5e6671;
	font-size:0
}
#bannerNav ul li.on a,#bannerNav ul li:hover a {
	background:#00aeff
}
#bannerNav ul li.on a {
	width:20px
}

#carousel {
	height:400px;	
}
#carousel img {
	width:500px;
	border-radius: 10px;
	opacity: 0;
}

</style>
</head>
<body>
<h1>匿名函数使用</h1>
<div id="div1">
	<span id="params1"></span>
	<span id="params2"></span>
	<span id="params3"></span>
</div>
<div id="banner">
	<div id="carousel">
		<img src="img/1.gif" data-url="#">
		<img src="img/2.gif" data-url="#">
		<img src="img/3.gif" data-url="#">
		<img src="img/4.gif" data-url="#">
		<img src="img/5.png" data-url="#">	
	</div>
</div>
<div id="div3">
	
</div>
<script>
	$(function() {
		$('#carousel').myfun({
			params1: "cccccccccccccccc", //默认索引
			params2: "2222222222222", //是否自动播放
			//params3: "333333333333333" //间隔时间
		});
	});
	//传递几个参数是为了加快 js执行效率，和 方便参数简写 比如 ：jquery 用到时候可以直接使用$
	//undefined是window下的一个属性，非保留字，非关键字，可以被重写。
	;(function($, window, document, undefined){
		var Myfun = function(elem, options) {
			this.defaults = {//定义参数的默认值。共3个默认参数
				params1: "默认111111111111111",
				params2: "默认22222222222222",
				params3: "默认333333333333333"
			};			
			this.opts = $.extend({}, this.defaults, options);
			var self = this;
			this.$carousel = elem;//元素
			this.$aImg = this.$carousel.find('img');
			

			this.imgLen = this.$aImg.length;//总图片数量
			this.params1 = this.opts.params1;
			this.params2 = this.opts.params2;			
			this.params3 = this.opts.params3;
			this.curDisplay = 0;
			this.iNow = this.curDisplay;
		};
		var outerWidth = parseInt(document.body.offsetWidth);
		var middleWidth = 1920;
		var _height = outerWidth >= middleWidth ? 380 : 300;
		var _slideHeight = outerWidth >= middleWidth ? 330 : 260;
		Myfun.prototype = {
			play: function() {
				console.log("自动**********");
				if (true) {
					if (this.iNow === this.imgLen - 1) {
						this.iNow = 0;
					} else {
						this.iNow++;
					}

					this.movingNext(this.iNow);
				}
			},

			movingPrev: function(index) {
				this.curDisplay = index;

				this.initalCarousel();
			},

			movingNext: function(index) {
				this.curDisplay = index;

				this.initalCarousel();
			},
			initalCarousel: function() {
				var self = this;
				this.$aImg.removeClass('on');
				//var half_imgLen = Math.floor(this.imgLen / 2);
				//var leftNum, rightNum;				
				this.$aImg.eq(this.curDisplay-1).css({
					//transform: 'translateX(' + (600 * (1 + 1)) + 'px) translateZ(-120px) ',
					//width:"auto",
					zIndex:-1
				}).animate({
					//height: _slideHeight + 'px',
					//marginTop: -_slideHeight / 2 + 'px',
					opacity: '0'
				}, 500).removeClass('on');
				
				//var _href = 'location.href=' + "'" + this.$aImg.eq(this.curDisplay).attr('data-url') + "'";
				this.$aImg.eq(this.curDisplay).css({
					//transform: 'translateZ(0px)',
					zIndex:99999
				}).animate({
					//height: _height + 'px',
					//marginTop: -_height / 2 + 'px',
					opacity: '1',
				}, 500).addClass('on');//.attr('onclick', _href);
				
			
				this.$carousel.on('webkitTransitionEnd', function() {
					self.b_switch = true;
				});
			},
			inital: function() { 
				var self = this;			
				$("#params1").html(this.params1);
				$("#params2").html(this.params2);
				$("#params3").html(this.params3);
				//this.initalCarousel();
				this.$aImg.on('click', function(ev) {
					//console.log("***点击时间触发***");
				}).hover(function() {
					//console.log("***鼠标移入清除定时触发***");
					clearInterval(self.timer);
				}, function() {
					//console.log("***鼠标移走定时触发***");
					self.timer = setInterval(function() {
						self.play();
					}, 1000);
				});
				this.timer = setInterval(function() {
					self.play();
				}, 1000);
				
			},
			constructor: Myfun//用来返回对象属性创建的函数
		};
		
		
		$.fn.myfun = function(options) {
			var myfun = new Myfun(this, options);

			return myfun.inital();
		};
	
	})(jQuery, window, document, undefined);
</script>
</body>
</html>